<template>
  <div class="content">
    <div class="head">
      <!-- 跳转到指定标签页，传入标签id -->
      <router-link class="label" :to="{path: tagHerf, query: {id: tagId}}">
        <div>{{post.label[0]}}</div>
      </router-link>
      <div class="time">{{post.time}}</div>
    </div>
    <div class="title">{{post.title}}</div>
    <!-- 跳转到文章详情页，传入文章id -->
    <router-link :to="{path: pageHerf, query: {id: pageId}}" class="image-content">
      <img class="image" :src="post.imgUrl" alt="">
    </router-link>
    <div class="brief">{{post.brief}}</div>
    <div class="more">
      <a>- 阅读全文 -</a>
    </div>
  </div>
</template>

<script>

export default {
  name: "Post",
  props: {
    post: Object
  },
  data() {
    return {
      tagId: this.post.label[1],
      pageId: this.post.id
    }
  },
  computed: {
    tagHerf: function () {
      return "/tags/"
    },
    pageHerf: function () {
      return "/pages/"
    }
  },
}
</script>

<style lang="stylus" scoped>
.content{
  font-family: Segoe UI, "PingFang SC"
  padding-bottom 50px
  .head{
    font-size 12px
    color #797979
    letter-spacing 1px
    font-weight 500
    display flex
    margin-top 40px
    justify-content center
    text-transform uppercase
    .label{
      margin-right 20px
      border-bottom 1px solid
      padding-bottom 2px
      text-decoration none
      color #797979
      transform .3s
      &:hover{
        color #000
      }
    }
  }
  .title{
    font-size 20px
    letter-spacing 2px
    text-align center
    margin 20px 0 30px 0
  }
  .image-content{
    .image{
      width 100%
      margin-bottom 25px
    }
  }
  .brief{
    line-height 28px
    margin-bottom 30px
  }
  .more{
    text-align center
    font-size 12px
    text-transform uppercase
    letter-spacing 2px
    color #797979
    font-weight 600
    line-height 35px
    border-bottom 1px solid
    transform .3s
    a{
      transform .3s
      &:hover{
        color #000
      }
    }
  }
}
</style>